<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>
<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" placeholder/>
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        let dataArr = [
            {
            id: 0,
            title: "残酷月光 - 费启鸣",
            checked: true,
            collect: true
            }, {
            id: 1,
            title: "兄弟 - 艾热",
            checked: false,
            collect: false
            }, {
            id: 2,
            title: "毕生 - 夏增祥",
            checked: false,
            collect: true
            }, {
            id: 3,
            title: "公子向北去 - 李春花",
            checked: false,
            collect: false
            }, {
            id: 4,
            title: "战场 - 沙漠五子",
            checked: true,
            collect: false //是否收藏 true 收藏 false 没有收藏
            }
        ];
        // 1.按照数据渲染 音乐列表 2.全选 全不选 ：注意联动  3.删除 ：（删除每一项 、删除选中的音乐）4.添加功能
        // 5.收藏和取消收藏功能
        // 先修改数据在渲染视图；
        renderDom();
        function renderDom(){
            let ulEle = document.getElementById("list");
            ulEle.innerHTML = '' ;
            dataArr.forEach( item => {
                let liEle = document.createElement("li");
                let inputCheck = '' ;
                let collectStr = '' ;
                if( item.checked ){
                     inputCheck =  `<input type="checkbox" checked />`;
                } else {
                     inputCheck =  `<input type="checkbox"/>`;
                }
                if ( item.collect ){
                     collectStr = `<a href="javascript:;" class="collect">取消收藏</a>` ; 
                } else {
                     collectStr = `<a href="javascript:;" class="collect">收藏</a>` ; 
                }
                liEle.innerHTML = ` ${inputCheck}
                                    <span>${item.title}</span>
                                    <div>
                                    ${collectStr}
                                    <a href="javascript:;" class="remove">删除</a>
                                    </div>`
                ulEle.appendChild(liEle);
            });
            operateData();
            addMusic();
            checkAll();
      }
      //删除        //勾选          //收藏
    function operateData(){
        let liEles = document.querySelectorAll("#list li");
        liEles.forEach( ( liEle , key ) => {
            liEle.onclick = function ( event ){
                let e = event || window.event ; 
                let target = e.target ; 
                if ( target.className == 'collect' ){
                    dataArr[key].collect = !dataArr[key].collect ; 
                    renderDom();
                }
                if ( target.type == 'checkbox'){
                    dataArr[key].checked = !dataArr[key].checked ;
                    let res = dataArr.every( item => item.checked );
                    document.getElementById("checkAll").checked = res ; 
                }
                if ( target.className == 'remove' ){
                    dataArr.splice(key,1);
                    renderDom();
                }
            }
        });
    }

    //全选与选中删除
    function checkAll () {
        let checkAll = document.getElementById("checkAll"); 
        checkAll.onclick = function(){
          let flag = checkAll.checked ; 
          dataArr.forEach( item => {
            item.checked = flag ; 
          });
          renderDom( dataArr ) ; 
        }
        let removeAll = document.getElementById("remove");
        removeAll.onclick = function (){
          let newArr = dataArr.filter( item => (item.checked == false) );
          if ( newArr.length == 0 ){
            checkAll.checked = false ;
          }
          dataArr = newArr ; 
          renderDom( dataArr ) ; 
        }
    }
    //添加
    function addMusic (){
        let addBtn = document.getElementById("add");
        let musicInfo = document.getElementById("newInfo");
        addBtn.onclick = function (){
          let obj = {};
          obj.id = dataArr.length ; 
          obj.title =`${musicInfo.value} `;
          obj.checked = false ; 
          obj.collect = false ; 
          dataArr.push(obj);
          renderDom( dataArr ) ; 
        }
    }
    // let arr = [1,2,3,4];
    // arr.prototype.fn = "132456" ; 
    // let obj = { name:"张三"};
    // arr.prototype = obj;
    </script>
</body>
</html>